<template>
  <div id="mobile-me">
    <div id="mobile-me-top-bar">
      <div id="mobile-me-top-bar-wrapper">
        <div id="mobile-me-top-bar-left">
          <img :src="avatarSrc" class="MobileMeAvatar">
        </div>
        <div id="mobile-me-top-bar-right">
          <span class="Username">{{ userid }}</span>
          <span @click.prevent="goToSetting()">
            <svg t="1657331798417" class="Icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3044" width="200" height="200"><path
                d="M512 700c-103.776 0-188-84.224-188-188S408.224 324 512 324s188 84.224 188 188-84.224 188-188 188z m0-312.832c-69.184 0-124.832 56.14933333-124.832 124.832s56.14933333 124.832 124.832 124.832c69.184 0 124.832-56.14933333 124.832-124.832 0-69.184-55.648-124.832-124.832-124.832z"
                fill="#2C2C2C" p-id="3045" data-spm-anchor-id="a313x.7781069.0.i0"></path><path
                d="M914.57066667 396.69333333l-1.504-2.00533333c-5.01333333-8.52266667-14.03733333-14.03733333-24.064-14.03733333-3.50933333 0-6.51733333 0.50133333-9.52533334 1.504-5.51466667 2.00533333-11.02933333 3.008-17.04533333 3.008-23.56266667 0-48.128-15.54133333-61.664-39.60533334-17.54666667-30.58133333-14.53866667-68.18133333 8.02133333-86.73066666 10.528-8.52266667 13.03466667-23.56266667 6.016-35.59466667l-1.504-2.50666667c-2.50666667-4.01066667-6.016-7.52-10.02666666-10.02666666l-175.46666667-101.26933334c-4.01066667-2.50666667-9.024-3.50933333-14.03733333-3.50933333h-5.51466667c-13.03466667 0-24.56533333 9.024-27.072 21.55733333-5.51466667 24.56533333-35.09333333 43.616-68.68266667 43.616-33.58933333 0-63.168-18.54933333-68.68266666-43.616-3.008-12.53333333-14.03733333-22.05866667-27.072-21.55733333h-5.51466667c-5.01333333 0-9.52533333 1.504-14.03733333 3.50933333L220.72533333 210.69866667c-4.01066667 2.50666667-8.02133333 6.016-10.02666666 10.02666666l-2.00533334 3.50933334c-7.01866667 12.032-4.01066667 26.57066667 6.51733334 35.59466666 21.55733333 18.048 25.06666667 54.64533333 7.52 85.22666667-13.536 24.064-37.6 39.60533333-61.664 39.60533333-5.51466667 0-11.02933333-1.00266667-16.544-3.008-3.008-1.00266667-6.51733333-2.00533333-10.02666667-2.00533333-10.02666667 0-19.05066667 5.51466667-24.064 14.03733333l-1.00266667 3.008c-2.50666667 4.01066667-3.50933333 9.024-3.50933333 14.03733334v203.04c0 5.01333333 1.504 9.52533333 3.50933333 14.03733333l3.008 5.01333333c5.01333333 8.52266667 14.03733333 14.03733333 24.064 14.03733334 3.008 0 6.016-0.50133333 9.024-1.504 4.512-1.504 9.52533333-2.50666667 14.53866667-2.50666667 22.56 0 46.12266667 15.54133333 59.65866667 39.60533333 17.04533333 29.57866667 14.53866667 65.17333333-5.51466667 82.21866667-10.02666667 9.024-12.53333333 23.56266667-6.016 35.09333333l2.50666667 4.01066667c2.50666667 4.01066667 6.016 8.02133333 10.02666666 10.02666667L396.69333333 914.57066667c4.01066667 2.50666667 9.024 3.50933333 14.03733334 3.50933333h5.51466666c13.03466667 0 24.56533333-9.024 27.072-22.05866667 5.51466667-25.568 35.09333333-45.12 68.68266667-45.12 33.58933333 0 63.168 19.05066667 68.68266667 45.12 3.008 13.03466667 14.03733333 22.05866667 27.072 22.05866667h5.51466666c5.01333333 0 9.52533333-1.504 14.03733334-3.50933333l175.46666666-101.26933334c4.01066667-2.50666667 8.02133333-6.016 10.02666667-10.02666666l2.00533333-3.008c7.01866667-12.032 4.01066667-26.57066667-6.51733333-35.59466667-21.056-17.54666667-24.064-55.14666667-6.51733333-85.22666667 14.03733333-24.064 38.10133333-40.10666667 61.664-40.10666666 5.51466667 0 10.528 1.00266667 15.54133333 2.50666666 3.008 1.00266667 6.51733333 1.504 9.52533333 1.504 10.02666667 0 19.05066667-5.51466667 24.064-14.03733333l1.504-2.00533333c2.50666667-4.01066667 3.50933333-9.024 3.50933334-14.03733334V410.73066667c1.00266667-5.01333333-0.50133333-10.02666667-3.008-14.03733334zM857.92 578.67733333h-1.504c-43.11466667 3.008-82.72 29.07733333-106.28266667 70.18666667-23.56266667 41.10933333-26.57066667 90.24-7.52 128.34133333l0.50133334 1.00266667-119.31733334 68.68266667-0.50133333-1.00266667c-23.56266667-33.58933333-66.176-54.64533333-111.296-54.64533333s-87.73333333 21.056-111.296 54.64533333l-0.50133333 1.00266667-120.32-69.68533334 0.50133333-1.00266666c18.048-37.09866667 15.04-84.72533333-7.52-124.33066667-23.06133333-40.608-62.66666667-67.17866667-104.77866667-69.68533333h-1.504V445.32266667h1.504c43.11466667-2.50666667 84.72533333-29.07733333 107.78666667-70.18666667 23.06133333-40.608 25.568-89.73866667 6.016-127.84l-1.00266667-1.00266667 119.31733334-68.68266666 0.50133333 1.00266666C424.768 211.2 467.38133333 231.75466667 512 231.75466667c44.61866667 0 87.232-20.55466667 110.79466667-53.14133334l0.50133333-1.00266666L742.61333333 245.792l-0.50133333 1.00266667c-19.552 38.60266667-17.54666667 87.73333333 6.016 128.84266666 23.56266667 40.608 65.17333333 67.68 108.288 70.18666667h1.504v132.85333333z"
                fill="#2C2C2C" p-id="3046" data-spm-anchor-id="a313x.7781069.0.i1"></path>
            </svg>
          </span>
        </div>
      </div>
    </div>
    <div id="mobile-me-content">
      <div id="mobile-me-content-wrapper">
        <MobileDashboard></MobileDashboard>
      </div>
    </div>
  </div>
</template>

<script>
import MobileDashboard from "@/components/mobile/MobileDashboard";
import axios from "axios";

export default {
  name: "MobileMe",
  components: {MobileDashboard},
  data() {
    return {
      userid: sessionStorage.getItem('userId'),
      avatarSrc: '',
    }
  },
  methods: {
    goToSetting() {
      this.$router.push('/m/me/settings');
    },
    getAvatar() {
      axios.get('/customer/getAvatar?userId=' + sessionStorage.getItem('userId')).then(res => {
        if (res.data.status === 0) {
          this.avatarSrc = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(() => {
        this.$message.error('网络错误，获取头像失败');
      });
    }
  },
  created() {
    axios.get("/customer/viewCustomer/"+sessionStorage.getItem('userId')).then(res => {
      this.userid = res.data.data.userid;
    });
    this.getAvatar();
  },
}
</script>

<style scoped>
#mobile-me {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#mobile-me-top-bar {
  background: #f3f6fd;
  flex-shrink: 0;
  height: 100px;
  padding: 0 3px 0 3px;
}

#mobile-me-top-bar-wrapper {
  padding: 5px 10px;
  margin: 4px 3px 0 3px;
  background: white;
  height: 79px;
  width: inherit;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: row;
}

#mobile-me-top-bar-left {
  flex: 1;
}

.MobileMeAvatar {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 2.4rem;
}

#mobile-me-top-bar-right {
  flex: 3.5;
  margin-top: 1.4rem;
}

.Username {
  font-weight: bolder;
  font-size: 24px;
  margin-left: 0.8rem;
}

.Icon {
  float: right;
  margin-right: 15px;
  width: 30px;
  height: 30px;
}

#mobile-me-content {
  background: #f3f6fd;
  /*overflow-y: auto;*/
  flex-grow: 2;
  /*z-index: 0;*/
  overflow: hidden;
  padding: 0 3px 10px 3px;
}

#mobile-me-content-wrapper {
  padding: 1px 10px 0 10px;
  background: white;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
  margin: 0 3px 3px 3px;
  height: 100%;
  width: auto;
}
</style>